<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>证书管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" maxlength="50" show-word-limit v-model="formInline.q" placeholder="输入关键字"></el-input>
      </el-form-item>
      <el-select v-model.number="formInline.grade" clearable placeholder="选择等级">
        <el-option v-for="item in gradeList" :key="item.choice" type="number" :label="item.description" :value="item.choice"></el-option>
      </el-select>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd()">{{typeMap[$route.query.type]}}添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="title" label="证书标题" width="150">
      </el-table-column>
      <el-table-column sortable prop="no_num" label="印刷编号" width="150">
      </el-table-column>
      <el-table-column align="center" sortable prop="grade_ch" label="证书等级" width="100">
      </el-table-column>
      <el-table-column align="center" sortable prop="user_id" label="用户ID" width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="owner_name" label="所属人姓名" width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="phone" label="手机号" width="120">
      </el-table-column>
      <el-table-column align="center" sortable prop="owner_id_num" label="身份证号" width="150">
      </el-table-column>
      <el-table-column align="center" sortable prop="issue_unit" label="发证机构" width="150">
      </el-table-column>
      <el-table-column align="center" sortable prop="extra_info.race_result" label="比赛成绩" width="150">
      </el-table-column>
      <el-table-column align="center" sortable prop="useful" label="状态" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.useful"
            :active-value="useful.active"
            :inactive-value="useful.inactive"
            @change="handle(scope.row.useful, scope.$index)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" sortable prop="public_date" label="发证日期" width="150">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <!-- <el-button size="mini" type="primary" @click="handleOpen(scope.$index)">开放</el-button>
          <el-button size="mini" type="danger" @click="handleClose(scope.$index)">关闭</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      background
      layout="prev, pager, next, total"
      :current-page="pageparm.currentPage"
      :page-size="pageparm.pageSize"
      :total="pageparm.total"
      @current-change="changePage"
      @prev-click="changePage"
      @next-click="changePage">
    </el-pagination>
    <!-- 添加/编辑界面 -->
    <el-dialog :close-on-click-modal="false" :title="`${title}${typeMap[$route.query.type]}`" :visible.sync="addFormVisible" width="70%" @click="closeDialog">
      <el-form label-width="120px" :model="addForm" :rules="rules" ref="addForm">
        <el-form-item label="用户ID" prop="user_id">
          <el-input size="small" v-model="addForm.user_id" auto-complete="off" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="所属人姓名" prop="owner_name">
          <el-input size="small" v-model="addForm.owner_name" auto-complete="off" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="所属人证件照" prop="owner_id_photo_url">
          <el-input size="small" type="url" v-model="addForm.owner_id_photo_url" auto-complete="off" placeholder="图片url地址"></el-input>
          <el-upload
            name="file_obj"
            :headers="uploadHeaders"
            class="avatar-uploader"
            :action="uploadImageUrl"
            :show-file-list="false"
            :on-success="handleSuccess"
            :before-upload="handleBeforeUpload">
            <img v-if="addForm.owner_id_photo_url" :src="$store.state.imgUrlPix + addForm.owner_id_photo_url" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="所属人身份证号" prop="owner_id_num">
          <el-input size="small" maxlength="18" show-word-limit v-model="addForm.owner_id_num" auto-complete="off" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input size="small" maxlength="11" show-word-limit v-model="addForm.phone" auto-complete="off" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker v-model="addForm.birthday" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder=""></el-date-picker>
        </el-form-item>
        <el-form-item label="证书标题" prop="title">
          <el-input size="small" maxlength="50" show-word-limit v-model="addForm.title" auto-complete="off" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="证书印刷编号" prop="no_num">
          <el-input size="small" v-model="addForm.no_num" auto-complete="off" placeholder=""></el-input>
          <el-button size="mini" type="info" @click="handleUsed(addForm.no_num)">检查是否已用</el-button>
        </el-form-item>
        <el-form-item label="发证机构" prop="issue_unit">
         <el-select v-model="addForm.issue_unit" placeholder="必选">
            <el-option v-for="item in issueList" :key="item.choice" :label="item.description" :value="item.choice"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考证等级" prop="grade">
          <el-select v-model.number="addForm.grade" placeholder="必选" @change="changeGrade">
            <el-option v-for="item in gradeList" :key="item.choice" :label="item.description" :value="item.choice"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否为电子证">
          <el-radio-group v-model.number="addForm.is_electronic">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发证日期" prop="public_date">
          <el-date-picker v-model="addForm.public_date" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="必填"></el-date-picker>
        </el-form-item>
        <el-form-item label="比赛成绩" prop="extra_info.race_result">
          <el-input size="small" v-model="addForm.extra_info.race_result" auto-complete="off" placeholder=""></el-input>
        </el-form-item>

        <template v-if="(title === '添加' && $route.query.type === 'grade') || (title === '修改' && editFormType === 'grade')">
           <el-form-item label="发证机构公章" prop="extra_info.issue_unit_seal_url">
            <el-input size="small" type="url" v-model="addForm.extra_info.issue_unit_seal_url" auto-complete="off" placeholder="图片url地址（仅限png）"></el-input>
            <el-upload
              name="file_obj"
              :headers="uploadHeaders"
              class="avatar-uploader"
              :action="uploadImagePngUrl"
              :show-file-list="false"
              :on-success="handleSuccessPNG"
              :before-upload="handleBeforeUploadPNG">
              <img v-if="addForm.extra_info.issue_unit_seal_url" @click="selImg"
                :src="$store.state.imgUrlPix + addForm.extra_info.issue_unit_seal_url"
                class="issue_unit_seal_url avatar">
              <i v-else @click="selImg" class="issue_unit_seal_url el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </template>

        <template v-if="(title === '添加' && $route.query.type === 'academic') || (title === '修改' && editFormType === 'academic')">
          <el-form-item label="比赛名称" prop="extra_info.race_name">
            <el-input size="small" v-model="addForm.extra_info.race_name" auto-complete="off" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="主办方" prop="extra_info.sponsor">
            <el-input size="small" v-model="addForm.extra_info.sponsor" auto-complete="off" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="主办方公章" prop="extra_info.sponsor_seal_url">
            <el-input size="small" type="url" v-model="addForm.extra_info.sponsor_seal_url" auto-complete="off" placeholder="图片url地址（仅限png）"></el-input>
            <el-upload
              name="file_obj"
              :headers="uploadHeaders"
              class="avatar-uploader"
              :action="uploadImagePngUrl"
              :show-file-list="false"
              :on-success="handleSuccessPNG"
              :before-upload="handleBeforeUploadPNG">
              <img v-if="addForm.extra_info.sponsor_seal_url" @click="selImg"
                :src="$store.state.imgUrlPix + addForm.extra_info.sponsor_seal_url"
                class="sponsor_seal_url avatar">
              <i v-else @click="selImg" class="sponsor_seal_url el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="主裁判" :prop="`extra_info[main_chief].name`"
            :rules="{required: true, message: '该选项不能为空', trigger: 'blur'}">
            <el-col :span="7">
              <el-input size="small" v-model="addForm.extra_info['main_chief'].name" auto-complete="off" placeholder="姓名"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item :prop="`extra_info[main_chief].img_url`"
            :rules="{required: true, message: '请输入合法的图片地址url（png）', trigger: 'blur'}">
            <el-col :span="20">
              <el-input size="small" type="url" v-model="addForm.extra_info['main_chief'].img_url" auto-complete="off" placeholder="签名图片url地址（仅限png）"></el-input>
              <el-upload
                name="file_obj"
                :headers="uploadHeaders"
                class="avatar-uploader"
                :action="uploadImagePngUrl"
                :show-file-list="false"
                :on-success="handleSuccessPNG"
                :before-upload="handleBeforeUploadPNG">
                <img v-if="addForm.extra_info['main_chief'].img_url" @click="selImg"
                  :src="$store.state.imgUrlPix + addForm.extra_info['main_chief'].img_url"
                  class="main_chief.img_url avatar">
                <i v-else @click="selImg" class="main_chief.img_url el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
          </el-form-item>
          <template v-for="(item, index) in addForm.extra_info.chief_list">
            <div :key="item.key">
              <el-form-item
                :label="`裁判${index + 1}`"
                :prop="`extra_info[chief_list][${index}].name`"
                :rules="{required: true, message: '该选项不能为空', trigger: 'blur'}">
                <el-col :span="7">
                  <el-input size="small" v-model="item.name" auto-complete="off" placeholder="姓名"></el-input>
                </el-col>
                <el-button size="small" @click.prevent="removeOption(index)">删除</el-button>
              </el-form-item>
              <el-form-item
                :prop="`extra_info[chief_list][${index}].img_url`"
                :rules="{required: true, message: '请输入合法的图片地址url（png）', trigger: 'blur'}">
                <el-col :span="20">
                  <el-input size="small" type="url" v-model="item.img_url" auto-complete="off" placeholder="签名图片url地址（仅限png）"></el-input>
                  <el-upload
                    name="file_obj"
                    :headers="uploadHeaders"
                    class="avatar-uploader"
                    :action="uploadImagePngUrl"
                    :show-file-list="false"
                    :on-success="handleSuccessPNG"
                    :before-upload="handleBeforeUploadPNG">
                    <img v-if="item.img_url" @click="selImg"
                      :src="$store.state.imgUrlPix + item.img_url"
                      :class="`chief_list.${index}.img_url avatar`">
                    <i v-else @click="selImg" :class="`chief_list.${index}.img_url el-icon-plus avatar-uploader-icon`"></i>
                  </el-upload>
                </el-col>
              </el-form-item>
            </div>
          </template>
        </template>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitAddForm('addForm')">提交</el-button>
        <el-button v-if="(title === '添加' && $route.query.type === 'academic') || (title === '修改' && editFormType === 'academic')" size="small" type="success" class="title" @click="addOption()">添加裁判</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { certificateList, certificateListSearch, certificateDetail, certificateUsed,
  certificateAddG, certificateUpdateG, certificateAddA, certificateUpdateA, certificateNonumUsed,
  certificateOpen, certificateClose, activityIssueList, activitynGradeList, uploadImageUrl, uploadImagePngUrl} from '../../api/userMG'
export default {
  data() {
    return {
      selImgClass: '',
      typeMap: {
        grade: '成绩证明',
        academic: '等级证书'
      },
      loading: false, //是显示加载
      addFormVisible: false, //控制页面显示
      editFormType: '',
      title: '添加',
      gradeList: [],
      issueList: [],
      useful: {
        active: 1,
        inactive: 0
      },
      addForm: {
        main_id: -1,
        owner_id_num: '',
        phone: '',
        title: '',
        no_num: '',
        issue_unit: '',
        owner_id_photo_url: '', // jpg, png
        owner_name: '',
        user_id: '',
        birthday: '',
        public_date: '',
        is_electronic: 1,
        grade: 1,
        grade_ch: '1级棋士',
        extra_info: {
          race_result: '',
        },
        token: localStorage.getItem('logintoken')
      },
      uploadHeaders: {
        token: localStorage.getItem('logintoken')
      },
      rules: {
        owner_id_num: [
          { required: true, message: '请输入所属人的身份证号', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
        ],
        title: [
          { required: true, message: '请输入证书标题', trigger: 'blur' },
        ],
        no_num: [
          { required: true, message: '请输入证书印刷编号', trigger: 'blur' },
        ],
        issue_unit: [
          { required: true, message: '请选择发证机构', trigger: 'blur' },
        ],
        owner_id_photo_url: [
          { required: true, message: '请输入合法图片url地址', trigger: 'blur' },
        ],
        owner_name: [
          { required: true, message: '请输入所属人姓名', trigger: 'blur' },
        ],
        user_id: [
          { required: true, message: '请输入用户id', trigger: 'blur' },
        ],
        grade: [
          { type: 'number', required: true, message: '请选择考证等级', trigger: 'blur' },
        ],
        is_electronic: [
          { type: 'number', required: true, message: '请选择是否为电子证', trigger: 'blur' },
        ],
        extra_info: {
          race_result: [
            { required: true, message: '请输入比赛成绩', trigger: 'blur' },
          ],
          issue_unit_seal_url: [
            { required: true, message: '请输入合法图片url地址（png）', trigger: 'blur' }
          ],

          sponsor_seal_url: [
            { required: true, message: '请输入合法图片url地址（png）', trigger: 'blur' },
          ],
          sponsor: [
            { required: true, message: '请输入主办方', trigger: 'blur' },
          ],
          race_name: [
            { required: true, message: '请输入比赛名称', trigger: 'blur' },
          ],
          birthday: [
            { required: true, message: '请选择生日', trigger: 'change' }
          ],
          public_date: [
            { required: true, message: '请选择发证日期', trigger: 'change' }
          ],
          chief_list: [
            { type: 'array', required: true, message: '请至少填写一个裁判及签名地址', trigger: 'change' }
          ],
        },
      },
      formInline: {
        location_id: 999999,
        page_index: 1,
        page_size: 15,
        q: '',
        grade: '',
        token: localStorage.getItem('logintoken')
      },
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 15,
        total: 0
      }
    }
  },
  // 注册组件
  components: {},
  /**
   * 创建完毕
   */
  created() {
    this.getType()
    this.getIssuelist()
    this.getGradelist()
    this.getdata(this.formInline)
  },
  watch: {
    $route(to, from) {
      this.getType()
    }
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    getType() {
      let ori = {
        main_id: -1,
        owner_id_num: '',
        phone: '',
        title: '',
        no_num: '',
        issue_unit: '',
        owner_id_photo_url: '', // jpg, png
        owner_name: '',
        user_id: '',
        birthday: '',
        public_date: '',
        is_electronic: 1,
        grade: 1,
        grade_ch: '1级棋士',
        extra_info: {
          race_result: '',
        },
        token: localStorage.getItem('logintoken')
      }
      let oriA = {
        sponsor: '',
        sponsor_seal_url: '', // png
        race_name: '',
        main_chief: { // -
          name: '',
          img_url: '' // png
        },
        chief_list: [],
      }
      let oriG = {
        issue_unit_seal_url: '' // png
      }
      if (this.$route.query.type === 'academic') {
        this.addForm.extra_info = {...ori.extra_info, ...oriA}
      }
      if (this.$route.query.type === 'grade') {
        this.addForm.extra_info = {...ori.extra_info, ...oriG}
      }
    },
    changePage(cur){
      this.pageparm.currentPage = cur;
      this.formInline.page_index = cur;
      this.getdata(this.formInline);
    },
    // 获取列表
    getdata(parameter) {
      this.loading = true
      let target = {}
      Object.assign(target ,parameter);
      if (!target.grade)  delete target.grade
      let rep = !target.q ? certificateList(target) : certificateListSearch(target)
      rep.then(res => {
          this.loading = false
          if (res.code === 0) {
            this.listData = res.data.list
            this.pageparm.currentPage = this.formInline.page_index
            this.pageparm.pageSize = this.formInline.page_size
            this.pageparm.total = res.data.total_items
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            })
          }
        })
        .catch(err => {
          this.loading = false
          this.$message.error('加载失败，请稍后再试！')
        })
    },
    getIssuelist() {
      let rep = activityIssueList()
      rep.then(res => {
        if (res.code === 0) {
          this.issueList = res.data
        } else {
          this.$message({
            type: 'info',
            message: res.msg
          })
        }
      })
      .catch(err => {
        this.loading = false
        this.$message.error('加载失败，请稍后再试！')
      })
    },
    getGradelist() {
      let rep = activitynGradeList()
      rep.then(res => {
        if (res.code === 0) {
          this.gradeList = res.data
        } else {
          this.$message({
            type: 'info',
            message: res.msg
          })
        }
      })
      .catch(err => {
        this.loading = false
        this.$message.error('加载失败，请稍后再试！')
      })
    },
    changeGrade(e) {
      this.addForm.grade_ch = `${e}级棋士`
    },
    removeOption(index) {
      this.addForm.chief_list.splice(index, 1)
    },
    addOption() {
      this.addForm.chief_list.push({
        name: '',
        img_url: '',
        key: Date.now()
      });
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page_index = parm.currentPage
      this.formInline.page_size = parm.pageSize
      this.getdata(this.formInline)
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline)
    },
    //显示添加界面
    handleAdd() {
      this.addFormVisible = true
      this.title = '添加'
      this.initAddForm()
    },
    initAddForm() {
      if (this.$route.query.type === 'academic') {
        this.addForm = {
          owner_id_num: '',
          phone: '',
          title: '',
          no_num: '',
          issue_unit: '',
          owner_id_photo_url: '', // jpg, png
          owner_name: '',
          user_id: '',
          birthday: '',
          public_date: '',
          is_electronic: 0, // -
          grade: 1,
          grade_ch: '1级棋士', // -
          extra_info: {
            race_result: '',
            sponsor: '',
            sponsor_seal_url: '', // png
            race_name: '',
            main_chief: { // -
              name: '',
              img_url: '' // png
            },
            chief_list: [{
              name: '',
              img_url: '' // png
            }],
          },
          token: localStorage.getItem('logintoken')
        }
      }
      if (this.$route.query.type === 'grade') {
        this.addForm = {
          owner_id_num: '',
          phone: '',
          title: '',
          no_num: '',
          issue_unit: '',
          owner_id_photo_url: '', // jpg, png
          owner_name: '',
          user_id: '',
          birthday: '',
          public_date: '',
          is_electronic: 0, // -
          grade: 1,
          grade_ch: '1级棋士', // -
          extra_info: {
            race_result: '',
            issue_unit_seal_url: '',
          },
          token: localStorage.getItem('logintoken')
        }
      }
    },
    handleEdit: function(index, row) {
      this.title = '修改'
      if (row.content.sponsor_seal_url) {
        this.editFormType = 'academic'
      }
      if (row.content.issue_unit_seal_url) {
        this.editFormType = 'grade'
      }
      this.addForm.main_id = row.main_id
      this.addForm.owner_id_num = row.owner_id_num
      this.addForm.phone = row.phone
      this.addForm.title = row.title
      this.addForm.no_num = row.no_num
      this.addForm.issue_unit = row.issue_unit
      this.addForm.owner_id_photo_url = row.owner_id_photo_url
      this.addForm.owner_name = row.owner_name
      this.addForm.user_id = row.user_id
      this.addForm.birthday = row.birthday
      this.addForm.public_date = row.public_date
      this.addForm.is_electronic = row.is_electronic

      this.addForm.grade = row.content.grade
      this.addForm.grade_ch = row.content.grade_ch
      this.addForm.extra_info = row.content.extra_info

      // if (this.editFormType === 'academic') {
      //   this.addForm.sponsor = row.content.sponsor
      //   this.addForm.sponsor_seal_url = row.content.sponsor_seal_url
      //   this.addForm.race_name = row.content.race_name
      //   this.addForm.main_chief = row.content.main_chief
      //   this.addForm.chief_list = row.content.chief_list

      //   delete this.addForm.issue_unit_seal_url
      // }
      // if (this.editFormType === 'grade') {
      //   this.addForm.issue_unit_seal_url = row.content.issue_unit_seal_url

      //   delete this.addForm.sponsor
      //   delete this.addForm.sponsor_seal_url
      //   delete this.addForm.race_name
      //   delete this.addForm.main_chief
      //   delete this.addForm.chief_list
      // }
      this.addFormVisible = true
    },
    // 编辑、增加页面保存方法
    submitAddForm(addData) {
      this.$refs[addData].validate(valid => {
        if (valid) {
          let rep
          if (this.title === '添加') {
            if (this.$route.query.type === 'academic') rep = certificateAddG(this.addForm)
            if (this.$route.query.type === 'grade') rep = certificateAddA(this.addForm)
          } else {
            if (this.editFormType === 'academic') rep = certificateUpdateG(this.addForm)
            if (this.editFormType === 'grade') rep = certificateUpdateA(this.addForm)
          }
          rep.then(res => {
            this.addFormVisible = false
            this.loading = false
            if (res.code === 0) {
              // 重设添加
              if (this.title === '添加') {
                this.initAddForm()
              }
              this.getdata(this.formInline)
              this.$message({
                type: 'success',
                message: '提交成功！'
              })
            } else {
              this.$message({
                type: 'info',
                message: res.msg
              })
            }
          })
          .catch(err => {
            this.addFormVisible = false
            this.loading = false
            this.$message.error('提交失败，请稍后再试！')
          })
        } else {
          this.addForm.img_list = []
          return false
        }
      })
    },
    handle(cur, index) {
      if (cur) {
        this.postUseful(true, index)
      } else {
        this.postUseful(false, index)
      }
    },
    handleUsed(num) {
      let rep = certificateUsed({no_num: num})
      rep.then(res => {
        if (res.code === 0) {
          this.$message({
            type: res.data ? 'success' : 'warning',
            message: res.msg
          })
        } else {
          this.$message({
            type: 'info',
            message: res.msg
          })
        }
      })
      .catch(err => {
        this.loading = false
        this.$message.error('请求失败，请稍后再试！')
      })
    },
    handleOpen(index) {
      this.$confirm('确定要开放活动吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        this.postUseful(true, index)
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleClose(index) {
      this.$confirm('确定要关闭活动吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.postUseful(false, index)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    postUseful(isOpen, index) {
      let rep = isOpen ? certificateOpen({main_id: this.listData[index].main_id}) : certificateClose({main_id: this.listData[index].main_id})
      let tip = isOpen ? '开放' : '关闭'
      rep.then(res => {
        if (res.code === 0) {
          this.$message({
            type: 'success',
            message: `证书已${tip}!`
          })
          this.getdata(this.formInline)
        } else {
          this.$message({
            type: 'info',
            message: res.msg
          })
        }
      })
      .catch(err => {
        this.loading = false
        this.$message.error('请求失败，请稍后再试！')
      })
    },
    closeDialog() {
      this.addFormVisible = false;
    },

    ///  图片
    handleBeforeUpload(file) {
      const isImage = file.type.includes("image");
      if (!isImage) {
        this.$message.error("上传文件类型必须是图片!");
      }
      return isImage;
    },
    handleSuccess(res, file) {
      if (res.code === 0) {
        this.addForm.owner_id_photo_url = res.data
      } else {
        this.$message.error(res.msg)
      }
    },

    selImg(e) {
      this.selImgClass = e.target.className.split(' ')[0]
    },
    handleBeforeUploadPNG(file) {
      const isImage = file.type.includes("png");
      if (!isImage) {
        this.$message.error("上传文件类型必须是PNG!");
      }
      return isImage;
    },
    handleSuccessPNG(res, file) {
      if (res.code === 0) {
        const selArr = this.selImgClass.split('.')
        let a = this.addForm['extra_info']
        for (let i = 0; i < selArr.length - 1; i++) {
          a = a[selArr[i]]
        }
        a[selArr[selArr.length - 1]] = res.data
        console.log(this.addForm, a, selArr)
      } else {
        this.$message.error(res.msg)
      }
    },

  },
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
.el-table--border, .el-table--group {
  margin: 20px 0;
}
.line {
  text-align: center;
}
.avatar {
  width: 180px;
  height: 180px;
  display: block;
}
</style>
